<template>
  <div class="calendar">
    <!-- 头部：月份切换 -->
    <div class="calendar-header">
      <NstButton @click="prevMonth">←</NstButton>
      <h2>{{ currentDate.format('YYYY年MM月') }}</h2>
      <NstButton @click="nextMonth">→</NstButton>
    </div>

    <!-- 星期标题 -->
    <div class="weekdays">
      <div v-for="day in weekdays" :key="day" class="weekday">{{ day }}</div>
    </div>

    <!-- 日期格子 -->
    <div class="days-grid">
      <div 
        v-for="(date, index) in visibleDates" 
        :key="index"
        class="day"
        :class="{
          'other-month': !date.isCurrentMonth,
          'today': date.isToday,
          'selected': date.isSelected
        }"
        @click="selectDate(date)"
      >
        {{ date.day }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import NstButton from '../button'
import dayjs from 'dayjs'

// Props 定义
const props = defineProps({
  modelValue: { type: Date },  // 选中的日期
  showAdjacentDays: { type: Boolean, default: true } // 是否显示相邻月份日期
})

const emit = defineEmits(['update:modelValue'])

// 当前显示的月份（默认当前月）
const currentDate = ref(dayjs())

// 星期标题（可配置）
const weekdays = ['日', '一', '二', '三', '四', '五', '六']

// 生成可见日期数组
const visibleDates = computed(() => {
  const startOfMonth = currentDate.value.startOf('month')
  const startDay = startOfMonth.day() // 本月第一天星期几
  const days = []

  // 生成42个日期（6周）
  for (let i = 0; i < 42; i++) {
    // 回到日历起始点（可能是上个月）
    const date = startOfMonth.subtract(startDay, 'day').add(i, 'day')

    days.push({
      date: date.toDate(),
      day: date.date(),
      isCurrentMonth: date.month() === currentDate.value.month(),
      isToday: date.isSame(dayjs(), 'day'),
      isSelected: props.modelValue && date.isSame(dayjs(props.modelValue), 'day')
    })
  }

  return days
})

// 月份切换
const prevMonth = () => {
  currentDate.value = currentDate.value.subtract(1, 'month')
}

const nextMonth = () => {
  currentDate.value = currentDate.value.add(1, 'month')
}

// 选择日期
const selectDate = (dateInfo) => {
  if (!props.showAdjacentDays && !dateInfo.isCurrentMonth) return
  currentDate.value = dayjs(dateInfo.date)
  emit('update:modelValue', dateInfo.date)
}
</script>

<style scoped lang="less">
.calendar {
  width: 350px;
  border: 1px solid @border-color;
  border-radius: 8px;
  padding: 16px;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 8px;
  .weekday {
    text-align: center;
  }
}

.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.day {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}

.day:hover {
  background: @hover-bg;
  color: @hover-color;
}

.other-month {
  color: #ccc;
}

.today {
  background: @theme-color;
  color: @hover-color;
  font-weight: bold;
}

.selected {
  background: @theme-color;
  color: @hover-color;
}
</style>